<div style="height: 350px">
    <div class="col-md-6" style="height: 100%;border: 1px solid #d8d8d8">
        <div id="chart_patent_type" style="width: 100%;height:100%;">加载中....</div>
    </div>
    <div class="col-md-6" style="height: 100%;border: 1px solid #d8d8d8" >
        <div id="chart_legal_status" style="width: 100%;height:100%;">加载中....</div>
    </div>
</div>
<div style="height: 350px">
    <div class="col-md-6" style="height: 100%;border: 1px solid #d8d8d8">
        <div id="chart_patent_cate" style="width: 100%;height:100%;">加载中....</div>
    </div>
    <div class="col-md-6" style="height: 100%;border: 1px solid #d8d8d8">
        <div id="chart_patent_year" style="width: 100%;height:100%;">加载中....</div>
    </div>
</div>

<script>
    $(function () {
        var chart_patent_type = echarts.init(document.getElementById('chart_patent_type'),null,{renderer: 'canvas'});
        var chart_legal_status = echarts.init(document.getElementById('chart_legal_status'),null,{renderer: 'canvas'});
        var chart_patent_year = echarts.init(document.getElementById('chart_patent_year'),null,{renderer: 'canvas'});
        var chart_patent_cate = echarts.init(document.getElementById('chart_patent_cate'),null,{renderer: 'canvas'});
        chart_patent_type.setOption({
            title: {
                text: "专利类型统计",
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [
                {
                    type: 'pie',
                    radius: '55%',
                    color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E'],
                    label: {
                        formatter: '{b}: {c} ({d}%)'
                    },
                    data: [
                        @foreach($types as $k=>$v)
                        {value: '{{$v}}', name: '{{$k}}'},
                        @endforeach
                    ]
                }
            ]
        });
        chart_legal_status.setOption({
            title: {
                text: "专利状态统计",
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [
                {
                    type: 'pie',
                    radius: '55%',
                    color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E'],
                    label: {
                        formatter: '{b}: {c} ({d}%)'
                    },
                    data: [
                         @foreach($cases as $k=>$v)
                        {value: '{{$v}}', name: '{{$k}}'},
                        @endforeach
                    ]
                }
            ]
        });
        chart_patent_year.setOption({
            title: {
                text: "申请日期统计",
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [
                {
                    type: 'pie',
                    radius: '55%',
                    label: {
                        formatter: '{b}: {c} ({d}%)'
                    },
                    data: [
                            @foreach($dates as $k=>$v)
                        {value: '{{$v}}', name: '{{$k}}年'},
                        @endforeach
                    ]
                }
            ]
        });

        chart_patent_cate.setOption({
            title: {
                text: "专利领域统计",
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [
                {
                    type: 'pie',
                    radius: '55%',
                    label: {
                        formatter: '{b}: {c} ({d}%)'
                    },
                    data: [
                            @foreach($categories as $k=>$v)
                        {value: '{{$v}}', name: '{{$k}}'},
                        @endforeach
                    ]
                }
            ]
        });
    });
</script>